<template>
    <div class="w-full bg-#fff box-border p-16px rounded-4px shadow">
        <n-collapse>
            <n-collapse-item :title="`编号-${item.id}`">
                <template #header-extra>
                    {{ new Date(item.createdTime).toLocaleString() }}
                </template>
                <n-descriptions
                    label-placement="top"
                    bordered
                    :columns="4"
                    @contextmenu="handleContextMenu"
                >
                    <n-descriptions-item label="注册账号">
                        {{ item.customerInfo.account }}
                    </n-descriptions-item>
                    <n-descriptions-item label="客户昵称">
                        {{ item.customerInfo.username }}
                    </n-descriptions-item>
                    <n-descriptions-item label="注册日期">
                        {{ new Date(item.createdTime).toLocaleString() }}
                    </n-descriptions-item>
                    <n-descriptions-item label="处理时间">
                        {{ new Date(item.processTime!).toLocaleString() }}
                    </n-descriptions-item>
                    <n-descriptions-item label="联系电话">
                        {{ item.customerInfo.phone }}
                    </n-descriptions-item>
                    <n-descriptions-item label="公司名称">
                        {{ item.customerInfo.companyName }}
                    </n-descriptions-item>
                    <n-descriptions-item label="审核结果">
                        <n-tag :type="item.status === 1 ? 'success' : 'error'">
                            {{ item.status === 1 ? "通过" : "未通过" }}
                        </n-tag>
                    </n-descriptions-item>
                    <n-descriptions-item
                        label="备注"
                        content-style="max-width: 160px"
                    >
                        {{ item.comments?.length ? item.comments : "无" }}
                    </n-descriptions-item>
                </n-descriptions>
            </n-collapse-item>
        </n-collapse>
        <n-dropdown
            placement="bottom-start"
            trigger="manual"
            :x="xPos"
            :y="yPos"
            :options="approvalActions"
            :show="showDropdown"
            :on-clickoutside="clickDropdownOutside"
            @select="handleDropdownSelect"
        />
    </div>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";
import { TrashBin } from "@vicons/ionicons5";
import type { Component } from "vue";
import { NIcon } from "naive-ui";

import type { CustomerApproval } from "@/service/api/types/user";

defineProps<{
    item: CustomerApproval;
}>();

const renderIcon = (icon: Component) => {
    return () => {
        return h(
            NIcon,
            { size: 20 },
            {
                default: () => h(icon),
            }
        );
    };
};

const approvalActions = [
    {
        label: "删除",
        key: "delete",
        icon: renderIcon(TrashBin),
    },
];

const xPos = ref<number>(0);
const yPos = ref<number>(0);
const showDropdown = ref<boolean>(false);

const handleContextMenu = (e: MouseEvent) => {
    e.preventDefault();
    xPos.value = e.clientX;
    yPos.value = e.clientY;
    showDropdown.value = true;
};

const clickDropdownOutside = () => {
    showDropdown.value = false;
};

const handleDropdownSelect = () => {
    showDropdown.value = false;
    window.NDialog.warning({
        title: "删除记录",
        content: "删除后将无法查询该账号的注册状态, 是否确认删除？",
        closable: false,
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: () => {
            window.NMessage.success("删除成功");
        },
    });
};
</script>

<style scoped></style>
